<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.6考试</title>
    <style>
        li {
            list-style: none;
        }

        .box {
            width: 1100px;
            margin: auto;
            padding: 20px;
            padding-left: 100px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .box>img:first-child {
            display: block;
            width: 200px;
            height: 110px;
            margin-left: 220px;
        }

        .content {
            width: 500px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            height: 60px;
            line-height: 60px;
            border: 2px solid black;
            margin-bottom: 30px;
            font-size: 18px;
        }

        .sub_btn {
            height: 65px;
            line-height: 65px;
            width: 96px;
            background-color: #ffd6e9;
            position: relative;
            left: -5px;
            top: 3px;
            border-left: none;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            font-size: 18px;
            color: black;
        }

        .box1 {
            width: 596px;
            border-radius: 10px;
            border: 2px solid black;
            float: left;
            padding-bottom: 20px;
        }

        .son {
            width: 596px;
            height: 40px;
            line-height: 40px;
            border-bottom: 2px solid black;
            text-align: left;
            margin-bottom: 30px;
        }

        .son span:nth-child(1) {
            display: inline-block;
            border-right: 2px solid black;
            padding: 0 30px;
            background-color: #8cd4cb;
            border-top-left-radius: 10px;
        }

        .son span:nth-child(2) {
            display: inline-block;
            border-top-right-radius: 10px;
            font-weight: bold;
            box-sizing: border-box;
            padding-left: 10px;
        }

        .son1 {
            width: 550px;
            border: 2px solid black;
            margin: auto;
            margin-bottom: 15px;
            height: 60px;
            line-height: 60px;
            border-radius: 10px;
            background-color: #f9f3e5;
            overflow: hidden;
        }

        .son1 div {
            margin-left: 15px;
            width: 28px;
            height: 28px;
            border-radius: 100%;
            border: 2px solid black;
            margin-top: 13px;
            float: left;
            background-color: white;
        }

        .son1 span {
            float: left;
            margin-left: 10px;
        }

        .son1 button {
            float: right;
            margin-right: 20px;
            margin-top: 13px;
            border-radius: 8px;
        }

        .box ul {
            width: 170px;
            float: left;
            margin-left: 50px;
            border: 2px solid black;
            border-radius: 10px;
            box-sizing: border-box;
            padding-left: 0;
        }

        .box ul li {
            width: 168px;
            height: 40px;
            line-height: 40px;
            border-bottom: 2px solid black;
            text-align: center;
        }

        .box ul li:last-child {
            border: none;
        }

        .box ul li:first-child {
            background-color: #8cd4cb;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .box ul li:nth-child(2) {
            background-color: #ffd6e9;
        }

        .son1>div>img {
            position: relative;
            top: -13px;
            left: 3px
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://www.ricocc.com/todo/assets/img/todo.svg" alt="">
        <input type="text" class="content">
        <button class="sub_btn">提交</button>

        <div class="box1">
            <div class="son">
                <span>全部标为完成</span>
                <span>今日事今日毕，勿将今事待明日！☕</span>
            </div>
            <div class="list">
            </div>
        </div>

        <ul>
            <li>开✨</li>
            <li>全部</li>
            <li class="run">进行中</li>
            <li>已完成</li>
            <li class="clearAll">清除全部</li>
            <li></li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 数据
        var arr = [
            {
                project: '玩游戏',
                status: false
            },
            {
                project: '敲代码',
                status: false
            }, {
                project: '睡觉',
                status: false
            },
        ]

        // 数据渲染
        function data() {
            $('.list').html('')
            arr.forEach((item, index) => {
                $('.list').append(`
                <div class="son1">
                    <div></div>
                    <span>${item.project}</span>
                    <button onclick="del(${index})"><img
                            src=""
                            alt=""></button>
                </div>
                `)
            });
        }
        data()


        // 勾选单个
        arr.forEach(function (item, index) {

            $('.son1 div').click(function () {
                if (item.status == false) {
                    this.style.backgroundColor = '#8cd4cb'
                    $(this).append('<img src="" alt="">')

                    $(this).parent().css({
                        'background-color': '#8cd4cb'
                    })
                    item.status = true
                    // console.log(item.status);

                    // console.log(arr);

                } else if (item.status == true) {
                    this.style.backgroundColor = 'white'
                    $(this).parent().css({
                        'background-color': '#f9f3e5'
                    })

                    item.status = false
                    console.log(item.status);
                }

            })
        })


        // 添加事件
        $('.sub_btn').click(function () {
            var content = $('.content').val()
            var i = arr.length
            arr.push({
                project: content,
                status: false
            })
            data()
            $('.content').val('')
        })



        // 删除单个事件
        function del(index) {
            arr.splice(index, 1)
            data()
        }



        // 清楚全部事件
        $('.clearAll').click(function () {
            arr = []
            data()
        })



        var arr1 = []
        // 查看未完成事件
        $('.run').click(() => {
            arr.forEach((item, index) => {
                if (item.status == false) {
                    console.log(item);
                    arr1.push(item)
                    console.log(arr1);
                    $('.list').html('')
                    arr1.forEach((item1, index1) => {
                        $('.list').append(`
                        <div class="son1">
                            <div></div>
                            <span>${item1.project}</span>
                            <button onclick="del(${index1})"><img
                                    src=""
                                    alt=""></button>
                        </div>
                        `)
                    });
                }
            })
        })

    </script>

</body>

</html>